<template>
  <div class="p-2">
    <el-row :gutter="20">
      <el-col :lg="24" :xs="24">
        <div v-show="showSearch" class="mb-[10px]">
          <el-card shadow="hover">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
              <el-form-item label="设备名称" prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>

        <el-card shadow="hover">
          <template #header>
            <el-row :gutter="10">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
              </el-col>
              <right-toolbar v-model:show-search="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar>
            </el-row>
          </template>

          <el-table v-loading="loading" border :data="listData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <template v-for="(item, index) in columns">
              <el-table-column v-if="item.visible"
                               :key="item.key"
                               :label="item.label"
                               :width="item.width"
                               align="center"
                               :prop="item.key" >
                <template v-slot="scope">
                  <template v-if="item.label === '状态'">
                    <el-tag type="success" v-if="scope.row.状态 === '在用'">{{ scope.row.状态 }}</el-tag>
                  </template>
                </template>
              </el-table-column>
            </template>

            <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button link type="primary" @click="handleEdit(scope.row)" icon="Edit">修改</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>

    <formVue ref="formRef"></formVue>

  </div>
</template>

<script setup>
// 方法
import { ref } from 'vue'
// 组件
import formVue from '@/views/property/consumables/form.vue'
const formRef = ref(null)
// 列显隐信息
const columns = ref([
  { "key": "耗材名称", "label": "耗材名称", "visible": true, "width": 150, "children": [] },
  { "key": "描述", "label": "描述", "visible": true, "width": 260, "children": [] },
  { "key": "出入库记录", "label": "出入库记录", "visible": true, "width": 260, "children": [] },
  { "key": "类型", "label": "类型", "visible": true, "width": 120, "children": [] },
  { "key": "规格", "label": "规格", "visible": true, "width": 120, "children": [] },
  { "key": "状态", "label": "状态", "visible": true, "width": 100, "children": [] },
  { "key": "库存数量", "label": "库存数量", "visible": true, "width": 120, "children": [] },
  { "key": "预警值", "label": "预警值", "visible": true, "width": 120, "children": [] },
  { "key": "单位", "label": "单位", "visible": true, "width": 100, "children": [] },
  { "key": "负责人", "label": "负责人", "visible": true, "width": 120, "children": [] }
]);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
const total = ref(0)
const showSearch = ref(true);
const loading = ref(true);
const listData = ref([
  {
    "耗材名称": "pH试纸",
    "描述": "广泛pH试纸，范围1-14，精度±0.5",
    "出入库记录": "2025-06-10 入库100本；2025-06-20 出库20本；2025-07-05 出库30本",
    "类型": "化学分析耗材",
    "规格": "100条/本",
    "照片": "img/consumables/ph_test_paper.jpg",
    "状态": "在用",
    "库存数量": 50,
    "预警值": 20,
    "单位": "本",
    "负责人": "张技术员"
  },
  {
    "耗材名称": "气相色谱柱",
    "描述": "毛细管柱，固定相5%苯基-95%甲基聚硅氧烷，30m×0.25mm×0.25μm",
    "出入库记录": "2025-05-15 入库5根；2025-06-01 出库1根；2025-07-01 出库1根",
    "类型": "仪器分析耗材",
    "规格": "30m×0.25mm×0.25μm",
    "照片": "img/consumables/gc_column.jpg",
    "状态": "在用",
    "库存数量": 3,
    "预警值": 1,
    "单位": "根",
    "负责人": "李工程师"
  },
  {
    "耗材名称": "无菌采样拭子",
    "描述": "聚酯纤维头，独立包装，适用于微生物采样",
    "出入库记录": "2025-07-01 入库2000支；2025-07-05 出库500支；2025-07-09 出库300支",
    "类型": "微生物检测耗材",
    "规格": "100支/盒",
    "照片": "img/consumables/swab.jpg",
    "状态": "在用",
    "库存数量": 1200,
    "预警值": 500,
    "单位": "支",
    "负责人": "赵检验员"
  },
  {
    "耗材名称": "分光光度计比色皿",
    "描述": "石英材质，光程10mm，透光率≥90%",
    "出入库记录": "2025-06-20 入库10套；2025-06-28 出库2套；2025-07-08 出库1套",
    "类型": "光学分析耗材",
    "规格": "10mm光程，4只/套",
    "照片": "img/consumables/cuvette.jpg",
    "状态": "在用",
    "库存数量": 7,
    "预警值": 3,
    "单位": "套",
    "负责人": "孙技术员"
  },
  {
    "耗材名称": "高压灭菌指示胶带",
    "描述": "热敏变色胶带，121℃灭菌后条纹变黑",
    "出入库记录": "2025-06-05 入库50卷；2025-06-15 出库10卷；2025-07-05 出库15卷",
    "类型": "消毒灭菌耗材",
    "规格": "19mm×55m/卷",
    "照片": "img/consumables/sterilization_tape.jpg",
    "状态": "在用",
    "库存数量": 25,
    "预警值": 10,
    "单位": "卷",
    "负责人": "周护士"
  },
  {
    "耗材名称": "微孔滤膜",
    "描述": "混合纤维素酯材质，孔径0.45μm，直径50mm",
    "出入库记录": "2025-07-02 入库100片；2025-07-05 出库20片；2025-07-09 出库15片",
    "类型": "样品前处理耗材",
    "规格": "0.45μm×50mm",
    "照片": "img/consumables/filter_membrane.jpg",
    "状态": "在用",
    "库存数量": 65,
    "预警值": 20,
    "单位": "片",
    "负责人": "吴技术员"
  },
  {
    "耗材名称": "电子天平称量纸",
    "描述": "无静电硫酸纸，100mm×100mm，100片/盒",
    "出入库记录": "2025-06-10 入库20盒；2025-06-25 出库5盒；2025-07-05 出库3盒",
    "类型": "称量耗材",
    "规格": "100mm×100mm",
    "照片": "img/consumables/weighing_paper.jpg",
    "状态": "在用",
    "库存数量": 12,
    "预警值": 5,
    "单位": "盒",
    "负责人": "郑技术员"
  }
]);


// 获取数据
const getList = () => {
  loading.value = false
}

// 搜索
const handleQuery = () => {
}

// 重置
const resetQuery = () => {
  for (let i in queryParams.value) {
    if (i !== 'pageNum' && i !== 'pageSize') {
      queryParams.value[i] = undefined
    }
  }
  handleQuery()
}

// 多选
const handleSelectionChange = () => {
}

// 新增
const handleAdd = () => {
  formRef.value.open()
}
// 编辑
const handleEdit = (item) => {
  formRef.value.edit(item)
}


getList()
</script>
